<template>
  <div class="orders">
    <div class="tabs">
      <div :class="['tab', editId == 1 ? 'selected' : '']" @click="editId = 1">
        <span>全部订单</span>
      </div>
      <div :class="['tab', editId == 2 ? 'selected' : '']" @click="editId = 2">
        <span>未支付</span>
      </div>
      <div :class="['tab', editId == 3 ? 'selected' : '']" @click="editId = 3">
        <span>已支付</span>
      </div>
      <div :class="['tab', editId == 4 ? 'selected' : '']" @click="editId = 4">
        <span>已取消</span>
      </div>
      <div :class="['tab', editId == 5 ? 'selected' : '']" @click="editId = 5">
        <span>门店支付</span>
      </div>
    </div>

    <div class="order_list" v-if="newDatas() && login">
      <div class="order_item" v-for="item in newDatas()" :key="item.id">
        <div class="ordernumber">
          订单号：
          <div>{{ item.orderNumber }}</div>
          <span>{{ item.state }}</span>
        </div>
        <div class="title">
          <div>{{ item.title }}</div>
          <span>￥{{ item.price }}</span>
        </div>
        <div class="content">
          <div class="number">
            <p>人数：</p>
            <span>{{ item.number }}</span>
          </div>
          <div class="travelTime">
            <p>行程时间：</p>
            <span>{{ item.travelTime }}</span>
          </div>
          <div class="orderTime">
            <p>下单时间：</p>
            <span>{{ item.orderTime }}</span>
          </div>
        </div>
        <div class="manner">
          <div class="freely">
            {{ item.manner }}
          </div>
          <div class="pay">
            <div
              class="topay"
              v-show="!item.pay && !item.cancel"
              @click="pay(item.id)"
            >
              支付
            </div>
            <router-link
              :to="'/searchlist?id='+1"
              tag="div"
              class="again"
              v-show="item.pay || item.cancel"
              >再次预订</router-link
            >
            <div
              class="again"
              v-show="!item.pay && !item.cancel"
              @click="cancel(item.id)"
            >
              取消订单
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="lost" v-if="!newDatas().length && login">
      <div class="img">
        <img src="../assets/img/no-order.png" alt="" />
      </div>
      <div class="text">暂时没有订单</div>
    </div>

    <div class="no_login" v-if="!login">
      <p>登录后才能查看你的行程哦～</p>
      <router-link to="/userinfo" tag="div" class="tologin"
        >登录查看行程</router-link
      >
    </div>
    <footer-nav></footer-nav>
  </div>
</template>

<script>
import FooterNav from "../components/FooterNav.vue";
import { getOrder } from "../api/home";
export default {
  components: { FooterNav },
  component: {
    FooterNav,
  },
  data() {
    return {
      editId: 1,
      datas: [],
      pushdata: {},
      login: false,
    };
  },
  methods: {
    newDatas() {
      if (this.editId == 1) {
        return this.datas;
      } else if (this.editId == 2) {
        return this.datas.filter((item) => !item.pay && !item.cancel);
      } else if (this.editId == 3) {
        return this.datas.filter((item) => item.pay);
      } else if (this.editId == 4) {
        return this.datas.filter((item) => item.cancel);
      } else if (this.editId == 5) {
        return this.datas.filter((item) => item.storesPay);
      }
    },

    cancel(id) {
      this.$dialog
        .confirm({
          title: "确认取消？",
        })
        .then(() => {
          let index = this.datas.findIndex((item) => item.id == id);
          this.datas[index].cancel = true;
          this.datas[index].state = "已取消";
          this.$toast.success("已取消");
        })
        .catch(() => {
          // on cancel
        });
    },

    pay(id) {
      this.$dialog
        .confirm({
          title: "确认支付？",
          message: "<span style='font-size: 24px;color: #fd6003;'>"+this.pushdata.price+"￥</span>",
        })
        .then(() => {
          let index = this.datas.findIndex((item) => item.id == id);
          this.datas[index].pay = true;
          this.datas[index].state = "已支付";
          this.$toast.success("支付成功");
        })
        .catch(() => {
          // on cancel
        });
    },

    getOrderFun() {
      getOrder().then((data) => {
        // console.log(data);
        this.datas = data.datas;
      });
    },
  },
  created() {
    // this.getOrderFun()
    // console.log(localStorage.getItem("userId"));
  },
  activated() {
    this.pushdata = this.$route.query.data;

    // console.log(localStorage.getItem("userId"));
    let user = localStorage.getItem("userId");

    if (user && user != "null") {
      this.login = true;
    } else {
      this.login = false;
    }
    // console.log(this.login);
    // console.log(pushdata);
    let index = true;

    if (this.pushdata) {
      this.datas.forEach((item) => {
        if (item.id == this.pushdata.id) {
          index = false;
        }
      });
    }

    // console.log(index);
    if ((typeof this.pushdata)=='object' && index) {
      // console.log(typeof this.pushdata);
      this.datas.unshift({
        id: this.pushdata.id,
        pay: false,
        cancel: false,
        storesPay: false,
        orderNumber: 1000221026000032,
        title: this.pushdata.title,
        number: "成人 x 1",
        state: "未支付",
        price: this.pushdata.price,
        travelTime: "2022-10-31 至 2022-11-1",
        orderTime: "2022-10-26 15:14:49",
        manner: this.pushdata.category,
      });
      this.$toast.success("已生成订单");
    } else if (!index) {
      this.$dialog({
        message: "已有此订单",
      });
    }
    // console.log(this.datas);
  },
};
</script>

<style lang="scss" scoped>
.orders {
  background-color: #f5f5f5;
  height: 100%;

  // border-top: 1px solid transparent;

  .order_list {
    padding-bottom: 80px;
    .order_item {
      background-color: #fff;
      margin-top: 10px;
      .ordernumber {
        margin: 0 15px;
        padding-top: 22px;
        font-size: 14px;
        color: #999;
        display: flex;
        align-items: center;
        div {
          flex: 1;
          font-size: 15px;
          color: #333;
        }
        span {
          color: #80d7d1;
        }
      }
      .title {
        font-size: 16px;
        color: #333;
        margin: 5.5px 15px;
        padding-top: 15.5px;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        span {
          color: #fd6003;
        }
      }
      .content {
        .number,
        .travelTime,
        .orderTime {
          margin: 5.5px 15px;
          font-size: 13px;
          display: flex;
          p {
            width: 70px;
            color: #666;
          }
          span {
            color: #333;
          }
        }
      }
      .manner {
        margin: 21px 15px 0 15px;
        display: flex;
        align-items: center;
        height: 50px;
        justify-content: space-between;
        .freely {
          font-size: 12px;
          color: #fff;
          height: 18px;
          border-radius: 3px;
          background: linear-gradient(
            120deg,
            rgba(59, 205, 195, 1) 20%,
            rgba(99, 182, 212, 1) 80%
          );
          padding: 0 7px;
        }
      }
      .pay {
        display: flex;
        .again {
          font-size: 15px;
          color: #80d7d1;
          border: 1px solid #80d7d1;
          border-radius: 3px;
          padding: 4px;
          margin-left: 8px;
        }
        .topay {
          font-size: 15px;
          background-color: #80d7d1;
          border-radius: 3px;
          padding: 4px;
          color: #fff;
        }
      }
    }
  }
  .no_login {
    margin-top: 180px;
    p {
      font-size: 14px;
      text-align: center;
      color: #333;
    }
    .tologin {
      font-size: 16px;
      width: 210px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      margin: 28px auto;
      border-radius: 3px;
      background-color: #80d7d1;
      color: #fff;
    }
  }
  .tabs {
    width: 100%;
    height: 40px;
    display: flex;
    background-color: #fff;
    border-bottom: solid 1px #ddd;
    position: sticky;

    top: 0;
    left: 0;
    .tab {
      padding: 0 13.5px;
      font-size: 14px;
      height: 40px;
      line-height: 40px;
    }
    .selected {
      font-weight: bold;
      span {
        border-bottom: solid 2px #ff7d03;
      }
    }
  }

  .lost {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .img {
    width: 133.86px;
    height: 110.91px;
    margin: 152.883px 0 0;
    img {
      width: 100%;
      display: block;
    }
  }
  .text {
    margin-top: 30px;
  }
}
</style>